<!--suppress ALL -->
<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
    <el-row :gutter="50">
      <el-col :span="12">
        <el-form-item label="项目名称" style="margin-top: 20px" >
          <el-input v-model="ruleForm.projectName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item label="测试进度" style="margin-top: 20px" >
          <el-progress :percentage="ruleForm.testSchedule" :color="customColor" stroke-width="10"></el-progress>
          <div >
            <el-button-group>
              <el-button size="mini" icon="el-icon-minus" @click="decrease" ></el-button>
              <el-button size="mini" icon="el-icon-plus" @click="increase"></el-button>
            </el-button-group>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="50">
      <el-col :span="12">
        <el-form-item label="测试人员" >
          <el-input v-model="ruleForm.tester"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="测试时间" size="medium">
          <el-date-picker
            v-model="ruleForm.testTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20">
        <el-form-item label="今日测试进展">
          <el-input type="textarea" v-model="ruleForm.remark" :rows="8"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20">
        <el-form-item label="bug情况">
          <el-input type="textarea" v-model="ruleForm.testBug" :rows="4"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="项目变更" prop="name">
          <el-input type="textarea" v-model="ruleForm.requirementsChange"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="风险" prop="name" >
          <el-input type="textarea" v-model="ruleForm.risk"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20">
        <el-form-item label="明日计划" >
          <el-input type="textarea" v-model="ruleForm.tomorrowPlan"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="群机器人" prop="region" style="margin-right: auto">
      <el-select v-model="ruleForm.botName" placeholder="请选择发生群机器人"  >
        <el-option v-for=" item in list" :label="item.botName" :value="item.botName"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="editTestDaily">确定</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      //路由跳转携带的参数
      customColor: '#409eff',
      list:null,
      //对应后端实体字段
      ruleForm: {
        projectName: '',
        tester: '',
        testTime: '',
        testBug: '',
        requirementsChange: '',
        risk:'',
        tomorrowPlan:'',
        botName: '',
        remark: '',
        //测试进度
        testSchedule: 10
      },
    }
  },
  created() {
    this.fetchData()
    this.ruleForm.id = this.$route.query.id
    this.getBotNameList()

  },
  mounted() {
  },
  methods: {
    getBotNameList(botName) {
      // 因为axios内部的then内部的this是指的axios对象，而不是当前vue的对象，因此把当前Vue的对象用vm声明，这样this就不会冲突
      var vm = this
      this.axios({
        method: 'GET',
        url: 'http://localhost:8080/bot/getBotName?botName=' + vm.ruleForm.botName
      }).then(response => {
        // 得到一个PageInfo对象
        this.total = response.data.total// 将PageInfo中的total赋给vm的total
        this.list = response.data.list// 当前页显示的所有数据
      })
    },
    fetchData() {
      // eslint-disable-next-line no-unused-vars
      //推荐使用箭头函数、不用定义this了
      this.axios({
        method: 'GET',
          url: 'http://127.0.0.1:8080/testDaily/getTestDaily?id=' + this.$route.query.id
      }).then(resp=> {
        this.ruleForm.projectName = resp.data.list[0].projectName,
        this.ruleForm.tester = resp.data.list[0].tester,
        this.ruleForm.testTime= resp.data.list[0].testTime,
        this.ruleForm.testSchedule= resp.data.list[0].testSchedule,
        this.ruleForm.testBug= resp.data.list[0].testBug,
        this.ruleForm.requirementsChange= resp.data.list[0].requirementsChange,
        this.ruleForm.tomorrowPlan= resp.data.list[0].tomorrowPlan,
        this.ruleForm.botName= resp.data.list[0].botName,
        this.ruleForm.remark= resp.data.list[0].remark
      })
    },
    editTestDaily() {
      console.log(this.ruleForm)
      // eslint-disable-next-line no-unused-vars
      var vm = this
      this.axios({
        method: 'POST',
        url: 'http://127.0.0.1:8080/testDaily/editTestDaily',
        data: vm.ruleForm
      }).then(resp=> {
        // eslint-disable-next-line eqeqeq
        if (resp.data == 'success') {
          // 弹框
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
        } else {
          this.$message.error('编辑失败')
        }
        // 添加成功后前往邮箱列表页->index
        this.$router.push({
          name: 'testDaily',
          path: '/testDaily'
        })
      })
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    increase() {
      this.ruleForm.testSchedule += 10;
      if (this.ruleForm.testSchedule > 100) {
        this.ruleForm.testSchedule = 100;
      }
    },
    decrease() {
      this.ruleForm.testSchedule -= 10;
      if (this.ruleForm.testSchedule < 0) {
        this.ruleForm.testSchedule = 0;
      }
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

